<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
//自定义动画

import { ColorPredefine } from "@/components/TopologyEditor/constant";

const emits = defineEmits(["confirm"])

const pageData = reactive({
  visible: false
})

const formOptions = [
  { type: 'input-number', label: '时长(ms)', key: 'duration', placeholder: "时长" },
  // { type: 'select', label: '类型', key: 'types', placeholder: "类型" },
  { type: 'input-number', label: '横向平移', key: 'x', placeholder: "横向平移" },
  { type: 'input-number', label: '纵向平移', key: 'y', placeholder: "纵向平移" },
  { type: 'input-number', label: '缩放', key: 'scale', placeholder: "缩放" , min: 0, step: 0.1 },
  { type: 'input-number', label: '旋转', key: 'rotate', placeholder: "旋转" },
  { type: 'color-picker', label: '颜色', key: 'color' },
  { type: 'color-picker', label: '背景颜色', key: 'background' },
  { type: 'input-number', label: '进度', key: 'progress', placeholder: "0 - 1", max: 1, min: 0, step: 0.1 },
  { type: 'color-picker', label: '进度颜色', key: 'progressColor' },
]
// const typeOptions = [
//   { value: 'progress', label: '进度条', },
//   { value: 'position', label: '位置', },
//   { value: 'scale', label: '缩放', },
//   { value: 'rotate', label: '旋转', },
// ]

const animatesItem = {
  duration: 500,
  progress: undefined,
  progressColor: "",
}

const animates = ref([])


function addAnimate() {
  animates.value.push(Object.assign({}, animatesItem))
}

//删除
function deleteAnimate(index) {
  animates.value.splice(index, 1)
}

const show = (initAnimates) => {
  animates.value = initAnimates
  pageData.visible = true
}

function onClose() {
  animates.value = []
  pageData.visible = false
}

//确认添加动画
function confirmAdd() {
  console.log(animates.value);
  emits("confirm", animates.value)
  onClose()
}

defineExpose({
  show
})
</script>

<template>
  <el-drawer v-model="pageData.visible" title="设置动画" size="280px" :close-on-press-escape="false"
    :close-on-click-modal="false" :append-to-body="true" destroy-on-close>
    <div class="add-btn">
      <el-button type="primary" @click="addAnimate">添加动画帧</el-button>
      <div><el-text  type="warning">缩放不可与平移共存</el-text></div>
      
    </div>

    <div>
      <el-form label-width="90px" label-position="left">
        <el-collapse>
          <template v-for="(item, index) in animates">
            <el-collapse-item :name="`animate${index}`" :title="`动画帧 ${index + 1}`">
              <template #title>
                <div class="animate-title">
                  <div>动画帧 {{ index + 1 }}</div>
                  <div>
                    <el-link @click="deleteAnimate(index)" :icon="Delete" :underline="false"></el-link>
                  </div>
                </div>
              </template>
              <el-form-item v-for="formItem in formOptions" :key="formItem.key" :label="formItem.label">
                <el-input-number :max="formItem.max" :min="formItem.min" :step="formItem.step" controls-position="right"
                  :placeholder="formItem.placeholder || formItem.label" v-if="formItem.type === 'input-number'"
                  v-model="item[formItem.key]"></el-input-number>
                <el-color-picker show-alpha :predefine="ColorPredefine" v-else-if="formItem.type === 'color-picker'"
                  v-model="item[formItem.key]"></el-color-picker>
                <el-select popper-class="editor-container-scss"  :placeholder="formItem.placeholder || formItem.label" v-else-if="formItem.type === 'select'"
                  v-model="item[formItem.key]" size="small">
                  <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </template>
        </el-collapse>
      </el-form>
    </div>

    <template #footer>
      <el-space>
        <el-button type="primary" size="default" @click="confirmAdd">确认</el-button>
        <el-button type="danger" plain size="default" @click="onClose">取消</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.add-btn {
  padding: 10px;
}

.animate-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  padding-right: 10px;
}
</style>